<template>
  <div v-permission="['app:set-channel']" class="app-container">

    <!-- 数据列表 -->
    <vxe-grid
      id="SetChannel"
      ref="grid"
      resizable
      show-overflow
      highlight-hover-row
      keep-source
      row-id="id"
      :proxy-config="proxyConfig"
      :columns="tableColumn"
      :toolbar-config="toolbarConfig"
      :pager-config="undefined"
      :loading="loading"
      :height="$defaultTableHeight"
    >

      <!-- 状态 列自定义内容 -->
      <template v-slot:available_default="{ row }">
        <available-tag :available="row.available" />
      </template>

      <!-- 操作 列自定义内容 -->
      <template v-slot:action_default="{ row }">
        <a-button type="link" @click="e => { channelId = row.channelId;$nextTick(() => $refs.configChannelDialog.openDialog()) }">配置参数</a-button>
      </template>
    </vxe-grid>

    <!-- 新增窗口 -->
    <config-channel ref="configChannelDialog" :app-id="appId" :channel-id="channelId" @confirm="search" />
  </div>
</template>

<script>
import AvailableTag from '@/components/Tag/Available'
import ConfigChannel from './config-channel'
export default {
  name: 'SetChannel',
  components: {
    AvailableTag, ConfigChannel
  },
  data() {
    return {
      loading: false,
      appId: this.$route.params.id,
      channelId: '',
      // 工具栏配置
      toolbarConfig: {
      },
      // 列表数据配置
      tableColumn: [
        { type: 'seq', width: 40 },
        { field: 'channelName', title: '渠道名称', minWidth: 180 },
        { field: 'isConfig', title: '是否配置', width: 100, formatter: ({ cellValue }) => { return cellValue ? '是' : '否' } },
        { field: 'available', title: '是否开通', width: 100, formatter: ({ cellValue }) => { return cellValue ? '是' : '否' } },
        { title: '操作', width: 100, fixed: 'right', slots: { default: 'action_default' }}
      ],
      // 请求接口配置
      proxyConfig: {
        props: {
          // 响应结果列表字段
          result: 'datas',
          // 响应结果总条数字段
          total: 'totalCount'
        },
        ajax: {
          // 查询接口
          query: ({ page, sorts, filters }) => {
            return this.$api.appChannel.query(this.buildQueryParams(page))
          }
        }
      }
    }
  },
  created() {
  },
  methods: {
    // 列表发生查询时的事件
    search() {
      this.$refs.grid.commitProxy('reload')
    },
    // 查询前构建查询参数结构
    buildQueryParams(page) {
      return Object.assign({
        appId: this.appId
      }, this.buildSearchFormData())
    },
    // 查询前构建具体的查询参数
    buildSearchFormData() {
      return {}
    }
  }
}
</script>
<style scoped>
</style>
